<template>
  <!-- 获取组织架构数据 -->
  <div class="dashboard-container">
    <div class="app-container">
      <!-- 卡片区域 -->
      <el-card class="box-card">
        <!-- 头部 -->
        <Departments :dataNode="company" :isShow="true"></Departments>
        <!-- /头部 -->

        <!-- 公司职位 -->
        <el-tree
          :data="data"
          :props="propsType"
          node-key="id"
          default-expand-all
          :expand-on-click-node="false"
        >
          <Departments
            @delPart="delPart"
            @editPart="editPart"
            @addPart="addPart"
            slot-scope="{ data }"
            :data-node="data"
          ></Departments>
        </el-tree>
        <!-- /公司职位 -->
      </el-card>
      <!-- 添加修改组件 -->
      <add-departments
        :isShow="isShow"
        :partId="userId"
        :isAdd="isAdd"
        @editShow="editShow"
      ></add-departments>
      <!-- /添加修改组件 -->
    </div>
    <!--  -->
  </div>
</template>

<script>
import AddDepartments from "./AddDepartments.vue";
import Departments from "./departments.vue";
import { getDepartments, delDepartments } from "@/api/departments";
import { departmentData } from "@/utils/index";
export default {
  created() {
    this.getList();
  },
  data() {
    return {
      company: { name: "江苏传智播客教育科技股份有限公司", manager: "负责人" },
      propsType: {
        label: "name",
      },
      data: [],
      isShow: false, // 添加删除组件
      userId: "", // 部门id
      isAdd: false, // false 修改 ，true 添加
    };
  },
  components: {
    Departments,
    AddDepartments,
  },
  methods: {
    async getList() {
      const data = await getDepartments();
      this.company.name = data.companyName;
      this.data = departmentData(data.depts, "");
    },
    async delPart(id) {
      try {
        await delDepartments(id);
        this.$message({
          type: "success",
          message: "删除成功!",
        });
        this.getList();
      } catch (error) {}
    },
    editPart(id) {
      this.isAdd = false;
      this.userId = id;
      this.isShow = true;
    },
    addPart(id) {
      this.isAdd = true;
      this.userId = id;
      this.isShow = true;
    },
    editShow(val) {
      this.isShow = val;
      this.getList();
    },
  },
};
</script>

<style  scoped>
.box-card {
  padding: 30px 140px;
  font-size: 14px;
}
</style>
